<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ele">
    <p id="result"></p>
    <script>
        const ele=document.getElementById('ele');
        ele.addEventListener('change',function(){
            console.log(this.value);
            result.innerHTML+=this.value;
        })
        // 派发一个事件
        // ele.dispatchEvent(new CustomEvent('change'));
        // new 手写  Object.create(prototype,属性)
        // const props=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value');

        const props=Reflect.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value');

        // console.log(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value'));
        // Object.defineProperty(HTMLInputElement.prototype,'value',{
        Reflect.defineProperty(HTMLInputElement.prototype,'value',{
            ...props,
            set(v){
                let oldv=this.value;  // 旧的值
                props.set.call(this,v);
                if(oldv !== v){
                    this.dispatchEvent(new CustomEvent('change'));
                }
            }
        })
        ele.value='change2';
        // console.log(props);
    </script>
</body>
</html>